<template>
  <div class="login">
    用户名:{{ mainStore.name }}<br />长度:{{ mainStore.nameLength }}
  </div>
  <p>
    <button @click="handleUpdatName">
      点我,修改 pinia 状态管理中, store 的 name 属性值
    </button>
  </p>
</template>

<script setup lang="ts">
import { useMainStore } from "@/store";

const mainStore = useMainStore();

const handleUpdatName = () => {
  mainStore.$patch({
    name: "tom" + Math.random()
  });
};
</script>

<style lang="scss" scoped src="./login.scss"></style>
